<template>
  <div :style="{width:width,height:height}" />
</template>

<script>
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "./mixins/resize";
export default {
  name: "ProductChart",
  mixins: [resize],
  props: {
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "350px"
    }
  },
  data() {
    return {
      chart: null,
      productArr: [], // 产品线数组
      productCount: [] // 各产品线人数
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val);
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, "macarons");
    }
  },
  created() {
    setTimeout(() => {
      this.axios
        .get("/student", {
          params: {
            position: localStorage.position,
            username: localStorage.username
          }
        })
        .then(res => {
          var productData = [];
          var sum = {};
          for (var i = 0; i < res.data.data.length; i++) {
            var product = res.data.data[i].product;
            if (toCom(product)) {
              productData.push({ product: product });
              sum[product + "Sum"] = 1;
            } else {
              sum[product + "Sum"] += 1;
            }
            function toCom(product) {
              for (var i = 0; i < productData.length; i++) {
                if (productData[i].product === product) {
                  return false;
                }
              }
              return true;
            }
          }
          for (var i in sum) {
            this.productCount.push(sum[i]);
          }
          for (var i = 0; i < productData.length; i++) {
            var pro = productData[i].product;
            this.productArr.push(pro);
          }
          //开始绘图数据
          this.chart.setOption({
            color: ["#3398DB"],
            title: {
              text: "产品线人数",
              x: "center"
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
              }
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true
            },
            xAxis: [
              {
                type: "category",
                data: this.productArr,
                axisTick: {
                  alignWithLabel: true
                }
              }
            ],
            yAxis: [
              {
                type: "value"
              }
            ],
            series: [
              {
                name: "人数",
                type: "bar",
                barWidth: "30%",
                data: this.productCount
              }
            ]
          });
        });
    }, 900);
  }
};
</script>